// import Vue from 'vue'

// 不好的地方:
// 1.自定义指令会越来越多, 不灵活 => 想全局就全局 想局部就局部
// 2.自定义指令 有的时候不需要都注册上

// 封装全局自定义指令 v-imgerror
// <img v-imgerror src="xxx" />

// 指令的配置对象 => 决定将来指令做什么 => 核心
export const imgerror = {
  // 指令所在的元素将来插入到页面中时, 会自动触发这个函数
  inserted(el, binding) {
    // el => element  指令所在的那个元素
    // binding => 指令相关的信息对象; binding.value => 指令的值
    // console.log('指令的数据:', el, binding.value)
    // 将来图片就是有用, 也会显示默认图片
    // el.src = binding.value
    // 需求: 发现图片错误了, 以后 处理默认图
    // el.onload
    // => 图片加载以后就会触发这个事件

    // 图片什么出错了
    // img.onerror = function() {}

    el.onerror = function() {
      el.src = binding.value
    }
  }
}

// 需求:
// <span v-color="color">哈哈</span>  color: 'red'

export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

